<template>
  <div>
    <van-notice-bar scrollable left-icon="volume-o" background="#ecf9ff" color="#1989fa" mode="closeable" :text="msg" />
        <el-carousel :interval="5000" arrow="always" :height="bannerHeight+'px'" v-loading="loadingflag">
          <el-carousel-item v-for="item in images" :key="item.id">
            <el-image
              @load="loads"
              :src="item.src"
              @click="switch_click(item)"
              fit="contain">
            </el-image>
          </el-carousel-item>
        </el-carousel>
    <div>
      <HomeYoushi></HomeYoushi>
    </div>
    <div>
      <HomeGongneng></HomeGongneng>
    </div>

    <div class="xinshou hidden-sm-and-up" v-if="isXinshou>0 && isXinshou<=2" @click="xinshou_event">
      <transition name="popshow" v-if="isXinshou>0">
        <div class="all">提示:<br>任意点击屏幕进行下一步</div>
      </transition>
      <transition name="popshow">
        <div class="tip" v-if="isXinshou==1">
          查看更多功能
        </div>
      </transition>
      <transition name="popshow">
        <div class="user" v-if="isXinshou==2">
          查看个人信息
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import HomeGongneng from "@/components/HomeGongneng";
import HomeYoushi from "@/components/HomeYoushi";
import image1 from "@/assets/4_5template.png"
import image2 from "@/assets/1550_600template.png"
import image3 from "@/assets/apple-1.jpg";
import image4 from "@/assets/apple-2.jpg"
export default {
  name: "Home_index",
  data(){
    return {
      images : [{
        src:image1,
        href:'a',
        id:1
      },{
        src:image2,
        href:'b',
        id:2
      },{
        src:image3,
        href:'c',
        id:3
      },{
        src:image4,
        href:'d',
        id:4
      }],
      msg:"到目前为止，你已经从你以为不会过去的事情中幸存了下来。",
      // 图片父容器高度
      bannerHeight: 1000,
      // 浏览器宽度
      screenWidth: 0,
      loadingflag:true,
      loadcount:0,
      xinshou_flag:true,
      isXinshou:0, //0默认，1是新手 2显示第二步
    }
  },
  components:{
    HomeYoushi,HomeGongneng
  },
  methods:{
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 600 / 1550 * this.screenWidth
      // 高度 / 宽度 = 比例   比例 * 宽度 = 高度
    },
    loads(){
      this.loadcount++
    },
    xinshou_event(){
      this.isXinshou++
      if(this.isXinshou == 2){
        localStorage.setItem('xinshou','3')
      }
    },
    switch_click(v){
      console.log(v)
    }
  },
  mounted () {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth
    this.setSize()
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth
      this.setSize()
    }
    let xs = localStorage.getItem('xinshou')
    if(!xs){
      this.isXinshou = 1
    }
  },
  watch:{
    loadcount(){
      if(this.loadcount>=this.images.length){
        this.loadingflag=false
      }
    }
  },
}
</script>

<style scoped>
  .el-image{
    height: 100%;
    width: 100%;
  }
  .el-image img{
    height: 100%;
  }

  .xinshou{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.43);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .xinshou .all{
    width: 150px;
    font-size: 20px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 10px;
    letter-spacing: 1px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.48);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.74);
    text-align: justify;
  }
  .xinshou .tip{
    position: absolute;
    right: 20px;
    top: 70px;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 10px;
    color: white;
    font-size: 16px;
  }
  .xinshou .tip:before{
    content: '';
    position: absolute;
    top: -20px;
    right: 46px;
    width: 0px;
    height: 0px;
    border: 10px solid rgba(0, 0, 0, 0.65);
    border-top-color: transparent;
    border-bottom-color: rgba(0, 0, 0, 0.65);
    border-left-color: transparent;
    border-right-color: transparent;
  }
  .xinshou .user{
    position: absolute;
    right: 5px;
    top: 70px;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 10px;
    color: white;
    font-size: 16px;
  }
  .xinshou .user:before{
    content: '';
    position: absolute;
    top: -20px;
    right: 10px;
    width: 0px;
    height: 0px;
    border: 10px solid rgba(0, 0, 0, 0.65);
    border-top-color: transparent;
    border-bottom-color: rgba(0, 0, 0, 0.65);
    border-left-color: transparent;
    border-right-color: transparent;
  }
  @keyframes xinshouani {
    0%{
      transform: translateY(-5px);
    }
    100%{
      transform: translateY(0);
    }
  }
  @keyframes showHide {
    0%{opacity: 0}
    100%{opacity: 1}
  }
  .popshow-leave-active{
    animation: showHide .3s reverse linear;
  }
  .popshow-enter-active{
    animation: showHide .3s linear;
  }
</style>
